<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
    <style>
        .layui-form-item .layui-input-inline {
            width: 150px;
        }
        .layui-form-label {
            padding: 9px 5px;
            width: auto;
        }
        .layui-table-cell{
            height: auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <strong>主播ID：{$model->anchor_id} 主播昵称：{$model->anchor_name}  直播标题：{$model->live_title}</strong>
            <a class="layui-btn" style="height:35px;line-height: 35px; margin-top:3px;float:right" onclick="layer_close()" title="关闭">
                关闭
            </a>
        </div>
        <div class="layui-card-body">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: "/layuiadmin/", //静态资源所在路径
    }).extend({
        index: "lib/index", //主入口模块
    }).use(["table"], function () {
        $ = layui.jquery, table = layui.table;

        table.render({
            elem: '#demo',
            id: '#demo',
            url: '/admin/privatechat/chat_user?id={$model->id}',
            defaultToolbar: [
                'filter', 'print', {title: '提示', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-table'},
            ],
            page: {
                curr: 1   //默认从第一页开始搜索
            },
            method: "get",
            //where: $("#sbumitForm").serialize(),
            limit: 20,
            limits: [20, 30, 50, 100],
            text: {
                none: '暂无相关数据！'//默认无数据
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'list',
            },
            cols: [[ //表头
                {field: 'user_id', title: '用户ID', width: "11%", align: "center"},
                {field: '', title: '用户昵称', width: "12%", align: "center", templet: function (item) {
                        if (item.user && item.user.nick_name) {
                            return item.user.nick_name;
                        }

                        return '-';
                    }
                },
                {field: '', title: '设备', width: "10%", align: "center", templet: function (item) {
                        switch (item.device) {
                            case 0:
                                return '浏览器';
                            case 1:
                                return 'IOS';
                            case 2:
                                return '安卓';
                        }
                    }
                },
                {field: 'ip', title: 'IP地址', width: "13%", align: "center", templet: function (item) {
                        return '<a href="https://www.ipshudi.com/' + item.ip + '.htm" target="_blank">' + item.ip + '</a>';
                    }
                },
                {field: 'chat_duration', title: '私聊时长', width: "10%", align: "center",templet: function (item) {
                        if (item.chat_duration) {
                            return formatSeconds(item.chat_duration);
                        }

                        return  item.chat_duration;
                    }
                },
                {field: '', title: '私聊人员', width: "13%", align: "center", templet: function (item) {
                        if (item.admin && item.admin.name) {
                            return item.admin.name;
                        }

                        return '-';
                    }
                },
                {field: '', title: '最后回复时间', width: "14%", align: "center", templet: function (item) {
                        if (item.latest_reply_time) {
                            if (item.latest_reply_time == '0000-00-00 00:00:00') {
                                return '-';
                            }
                            return item.latest_reply_time;
                        }

                        if (item.created_at == '0000-00-00 00:00:00') {
                            return '-';
                        }

                        return item.created_at;;
                    }
                },
                {field: '', title: '私聊内容', width: "10%", align: "center", templet: function (item) {
                        return '<a class="layui-btn  layui-btn-xs"  onclick="chat_content(' + item.id + ')"><i class="layui-icon"></i>查看</a>';
                    }
                },
                {
                    field: '', title: '操作', align: "center", templet: function (item) {
                        if(true){
                            return '<a class="layui-btn  layui-btn-xs"  onclick="start_chat(' + item.anchor_id + ',\'' + item.user_id + '\',' + item.id + ')"><i class="layui-icon"></i>私聊</a>';
                        }
                        return '';
                    }
                }
            ]],
            done: function (res, curr, count) {
                res.list.forEach(function (item, index) {

                });
            },
        });
    });

    function chat_content(id) {
        layer.open({
            type: 2,
            title: ["私聊内容", 'font-size:16px'],
            content: '/admin/privatechat/chat_content?id=' + id,
            area: ['680px', '600px'],
            //offset: '0px',
        });
    }
    
    function layer_close() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }


    /**
     * 开始接入私聊
     * @param anchor_id
     * @param user_id
     * @returns {*}
     */
    function start_chat(anchor_id, user_id, chat_id) {
        if (anchor_id < 1 || user_id < 1 || chat_id < 1) {
            return layer.msg('参数错误，请刷新重试')
        }

        layer.load()
        $.ajax({
            url: '/admin/privatechat/start_chat',
            type: 'post',
            dataType: 'json',
            data: {anchor_id: anchor_id, user_id: user_id, chat_id: chat_id},
            success: function (res) {
                if (res.code == 0) {
                    var index = layer.open({
                        type: 2,
                        title: "发起私聊",
                        content: '/admin/privatechat/start_chat?anchor_id=' + anchor_id + '&user_id=' + user_id + '&chat_id=' + chat_id,
                        area: ['560px', '600px'],
                    });
                    return layer.full(index);
                }
                return layer.msg(res.msg);
            },
            error: function (err) {
                layer.msg('系统异常,请稍后再试!');
            },
            complete: function () {
                layer.closeAll('loading');
            }
        });
    }

    function formatSeconds(value) {
        let second = parseInt(value)
        let minute = 0
        let hour = 0
        if (second > 60) {
            minute = parseInt(second / 60)
            second = parseInt(second % 60)
            if (minute > 60) {
                hour = parseInt(minute / 60)
                minute = parseInt(minute % 60)
            }
        }

        let result = '' + parseInt(second) + '秒'
        if (minute > 0) {
            result = '' + parseInt(minute) + '分' + result
        }
        if (hour > 0) {
            result = '' + parseInt(hour) + '时' + result
        }
        return result
    }

</script>
</body>
</html>
